<template>
  <view class="StationxqPage">
    <u-navbar title="站点详情">
      <template #right>
        <view
          v-show="current == 0"
          class="iconfont iconquyu"
          :class="{ active: showpcs }"
          @click="showlistfn('showpcs')"
        ></view>
        <view
          v-show="current == 0"
          class="iconfont iconicon-chongdianzhuang"
          :class="{ active: showsb }"
          @click="showlistfn('showsb')"
        ></view>
      </template>
    </u-navbar>
    <view style="background: #fff">
      <u-tabs :list="tabslist" @click="tabsclick" :scrollable="false"></u-tabs>
    </view>
    <view class="scrollview">
      <xqview1
        :item="{
          pcs: query.id,
          showpcs,
          showsb,
        }"
        v-show="current == 0"
      ></xqview1>
      <xqview2
        :item="{
          pcs: query.id,
          showpcs,
          showsb,
        }"
        v-show="current == 1"
      ></xqview2>
      <xqview3
        :item="{
          pcs: query.id,
          showpcs,
          showsb,
        }"
        v-show="current == 2"
      ></xqview3>
    </view>
  </view>
</template>

<script>
  import xqview1 from "./components/xqview1";
  import xqview2 from "./components/xqview2";
  import xqview3 from "./components/xqview3";
  export default {
    components: {
      xqview1,
      xqview2,
      xqview3,
    },
    data() {
      return {
        showpcs: true,
        showsb: true,
        tabslist: [
          {
            name: this.$z.$t("设备"),
          },
          {
            name: this.$z.$t("站点信息"),
          },
          {
            name: this.$z.$t("收入"),
          },
        ],
        query: {},
        current: "0",
      };
    },
    onLoad(query) {
      this.query = query;
    },
    methods: {
      showlistfn(key) {
        this[key] = !this[key];
      },
      tabsclick(item) {
        this.current = item.index;
      },
    },
  };
</script>
<style>
  page {
    background: #efeff4;
  }
</style>
<style lang="scss" scoped>
  .StationxqPage {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .scrollview {
      flex: 1;
      height: 0;
    }
  }

  .iconfont {
    height: 88rpx;
    width: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #969696;

    &.iconquyu {
      font-size: 40rpx;
    }

    &.iconicon-chongdianzhuang {
      font-size: 48rpx;
      margin-right: -26rpx;
    }

    &.active {
      color: #2093f5;
    }
  }
</style>
